<style scoped>

</style>

<template>

<div>
  
  <Modal
    v-model="IsModalShow"
    :title="modalFormTitle"
    :mask-closable="false"
    @on-cancel="cancel"
    width="600">
    <Form ref="modalForm" :model="modalForm" :label-width="120"  value=true  style="padding: 3px 60px">
      <Form-item label="用户名称" prop="nickname" :rules="{required: true, message: '必填,1-10位字符',min:1,max:10, trigger:'blur',type:'string'}" >
        <Input v-model="modalForm.nickname" ></Input>
      </Form-item>
      <Form-item label="登录名" prop="loginName" :rules="{required: true, message: '必填,6-16位数字或字母或-_', trigger:'blur',type:'string',pattern: /^[a-zA-Z0-9_-]{6,16}$/}" >
        <Input v-model="modalForm.loginName" ></Input>
      </Form-item>
      <Form-item v-if="modalFormTitle==='添加用户'" label="密码" prop="password"  :rules="{required: true, message: '必填,6-16位数字或字母或-_', trigger:'blur',type:'string',pattern: /^[a-zA-Z0-9_-]{6,16}$/}" >
        <Input v-model="modalForm.password" type="password"></Input>
      </Form-item>
      <Form-item label="电话" prop="mobile" :rules="{required: true, message: '输入11位手机号', trigger:'blur',type:'string',pattern: /^1\d{10}$/}">
        <Input v-model="modalForm.mobile" ></Input>
      </Form-item>
      <Form-item label="角色" prop="rbac_RoleId" :rules="{required: true, message: '必选', trigger:'change', type:'number'}"  >
        <Select v-model="modalForm.rbac_RoleId" placeholder="请选择" @on-change="roleChange">
          <Option v-for="item in roleComboList" :value="item.id" :key="item.Id">{{ item.roleName }}</Option>
        </Select>
      </Form-item>
      <Form-item label="部门" prop="depArray" :rules="{required: true, message: '必选', trigger:'change', type:'array'}">
      <Cascader :data="deptCasc" v-model="modalForm.depArray" :filterable="true" change-on-select transfer placeholder="选择部门"></Cascader>
      </Form-item>
       <Form-item label="所属维保单位" prop="smk_MaintenanceId" v-show="mainNameShow">
          <Select v-model="modalForm.smk_MaintenanceId" placeholder="请选择" >
            <Option v-for="item in MaintenanceComboList" :value="item.id" :key="item.id">{{ item.mainName }}</Option>
          </Select>
        </Form-item>
        <Form-item label="备注" prop="remark">
          <Input v-model="modalForm.remark" type="textarea"></Input>
        </Form-item>
    </Form>
    <div slot="footer">
      <Button type="ghost"  @click="cancel" >关闭</Button>
      <Button type="primary"  :loading="modalForm_loading" @click="saveForm('modalForm')">保存</Button>
    </div>
  </Modal>
</div>

</template>

<script>
import {saveUser,roleComboList,getAreasCascader,getMaintenanceCombo} from './../../../api/getData'
export default {
    props:{
      parentForm: {
        type: Object,
        default: function () {
          return {
            Id:'',
            nickname: '',
            loginName: '',
            mobile:'',
            PhoneNum:'',
            rbac_roleId:0,
            depArray:[],
            smk_MaintenanceId:0
          }
        }
      },
      modalShow:{
        type: Boolean,
        default: true,
      },
      modalFormTitle:{
        type: String,
        default: '添加用户',
      },
    },
    data() {
        return {
          IsModalShow:false,
          modalForm:{
          },
          modalForm_loading:false,
          deptCasc:[],
          roleComboList:[{id:1,roleName:'管理员'}],
          MaintenanceComboList: [],
          mainNameShow:false,
        }
    },
    watch:{
      modalShow(curVal,oldVal){
        this.modalForm=Object.assign(this.parentForm);
        //console.log(this.modalForm.depArray)
        
        if (this.parentForm.depArray && curVal) {
        this.modalForm.depArray = this.parentForm.depArray
          .split(",")
          .map(function(item) {
            return parseInt(item);
          });
      }
        this.IsModalShow = curVal;
        this.roleChange();
        if(this.modalFormTitle=='添加用户'){
          this.modalForm.rbac_RoleId=1;
        }
      }
    },
    created(){
      this.getRoleComboList();
      this.getDeptCascList();
    },
    mounted(){
        this.getMaintenanceComboList();
    },
    methods: {
      async getRoleComboList(){
        let res = await roleComboList();
        this.roleComboList=res.data;
        //console.log(this.roleComboList);
      },
      async getDeptCascList(){
        let res = await getAreasCascader({id:0});
        this.deptCasc=res.data;
        //console.log(this.deptCasc);
      },
     async getMaintenanceComboList() {
      let res = await getMaintenanceCombo();
      this.MaintenanceComboList = res.data;
      console.log("MaintenanceComboList"+this.MaintenanceComboList)
    },
      cancel() {
          this.$emit('listenModalForm');
      },
      roleChange(){
        let _this = this;
        if(_this.modalForm.rbac_RoleId){
          this.mainNameShow=this.roleComboList.find(val=>val.id==_this.modalForm.rbac_RoleId).roleName=='维保人员'
          if(!this.mainNameShow)
            this.modalForm.smk_MaintenanceId=0;
        }


   // this.modalForm.smk_MaintenanceId=0;
      },
      saveForm(name) {
        this.$refs[name].validate( async (valid) => {
          if (valid) {
           // this.modalForm_loading=true;
            const params = this.modalForm;
            let arr = this.modalForm.depArray;
            params.depArray=arr.join(",");
            if(arr.length>2){
               params.departmentId = arr[arr.length-2];
            }else{
               params.departmentId = arr[arr.length-1];
            }
           
            try{
              let result=await saveUser(params);
              
              if (result.code=="0") {
                this.$Message.success('提交成功!');
                this.$emit('listenModalForm');
                this.$emit('refreshTableList');
              }else{
                this.$Message.error(result.msg);
              }
            }catch(err){
              console.log(err);
              this.$Message.error('服务器异常，稍后再试');
            }
            this.modalForm_loading=false;
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
    }
}

</script>
